<template>
  <view>
    
    <z-tabs :list="tablist" active-color="Orangered" class="tabstitle"
      :active-style="{'font-size':'40rpx','font-weight':'bold'}" @change="tabs"></z-tabs>
      
    <view class="content" v-if="tabindex===0">
      <view class="bottom-category-title">
        <scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
          <view class="nav-left-item" :key="index" :class="index==categoryActive?'active':''"
            v-for="(item,index) in male">
            <!-- 此处可自定义内容 -->
            <text @click="categoryClickMain(item,index)">{{item.shortTitle}}</text>
            <!-- 
					<image :src="item.icon" /> -->
          </view>
        </scroll-view>
      </view>
      <view class="bottom-category-content ptb" v-for="(it,keys) in male" :key="keys" v-if="keys===categoryActive">
         <ls-loading :text="$t('read.jzz')+'...'" animation="twinkle" v-if="!maleis[keys]" :embed="true" style="margin-top: 200rpx;"></ls-loading>
        <scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:800px'">
          <view class="gridSm g1 bg">
            <uni-books-pai :data="item" v-for="(item,index) in maleCategoryList[keys]" :key="index" @flags="flag">
            </uni-books-pai>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="content" v-if="tabindex===1">
      <view class="bottom-category-title">
        <scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
          <view class="nav-left-item" :key="index" :class="index==categoryActive?'active':''"
            v-for="(item,index) in list.female">
            <!-- 此处可自定义内容 -->
            <text @click="categoryClickMain(item,index)">{{item.shortTitle}}</text>
            <!-- 
    			<image :src="item.icon" /> -->
          </view>
        </scroll-view>
      </view>
      <view class="bottom-category-content ptb" v-for="(it,keys) in list.female" :key="keys" v-if="keys===categoryActive">
         <ls-loading :text="$t('read.jzz')+'...'" animation="twinkle" v-if="!femaleis[keys]" :embed="true" style="margin-top: 200rpx;"></ls-loading>
        <scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:800px'">
          <view class="gridSm g1 bg">
            <uni-books-pai :data="item" v-for="(item,index) in femaleCategoryList[keys]" :key="index" @flags="flag">
            </uni-books-pai>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
  import _list from '@/util/list.js';
  export default {
    data() {
      return {
        showPopup: false, //是否显示控件
        categoryActive: 0, //当前活跃的选项(左侧tabbar)
        height: 'auto',
        maleCategoryList: [], //categoryList中对应的subList
        scrollTop: 0,
        femaleCategoryList: [], //categoryList中对应的subList
        tabindex: 0,
        male: [],
        maleis:[],
        femaleis:[],
        tablist: [this.$t('book.ns'), this.$t('book.nsg')]
      };
    },
    props: {
      bottom: {
        type: Number,
        default: 0
      },
      list: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    computed: {
      footer_height() {
        return uni.upx2px(this.bottom);
      }
    },
    mounted() {
      this.male = this.list.male
      this.categoryClickMain(this.list.male[0], 0)
    },
    methods: {
      tabs(e) {
      console.log(e)
      this.tabindex = e
      let categroy=e?this.list.female[0]: this.list.male[0]
      this.categoryClickMain(categroy, 0)
      },
      show() {
        this.showPopup = true;
        //	this.subCategoryList = this.categoryList[this.categoryActive].subList;
      },
      maskClick() { //背景层点击事件
        //this.cancel();
      },
      flag(e) {
        uni.navigateTo({
          url: '/pages/book_mall/details?type=list&name=' + e.title+'&author=' + e.author
        });
      },
      cancel() { //隐藏
        this.showPopup = false
      },
      //scroll-view
      scroll(e) {
        this.scrollHeight = e.detail.scrollHeight;
      },
      categoryClickMain(categroy, index) {
        let _this = this;
        this.categoryActive = index;
        _list.gendercat(categroy._id).then((re) => {
         if(this.tabindex){
         _this.femaleCategoryList[index] = re.ranking.books;  
         _this.femaleis[index]=true
         }else{
         _this.maleCategoryList[index] = re.ranking.books;
         _this.maleis[index]=true
         }
         _this.scrollTop = 0;
         _this.$forceUpdate();
        });

      },
      chooseIcon(index) { //右侧点击事件
        //提交到父级
        this.$emit('exampleEvent', [this.categoryActive, index]);
      }
    }
  };
</script>

<style lang="scss">
  @import url("./xyz-bottom-category.css");
</style>
